<template>
  <div>
    <el-card>
      <t-head
        @search="searchHandle"
        @add="open"
        addName="用户"
        searchPlace="账号/昵称/手机号"
      />
      <el-table :data="userlist" border style="width: 100%; margin-top: 20px">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="headicon" label="头像">
          <template slot-scope="scope">
            <img
              :src="scope.row.headicon"
              v-if="scope.row.headicon"
              alt="头像"
              class="headicon"
            />
            <span v-else> - </span>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称"></el-table-column>
        <el-table-column prop="account" label="账号"> </el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "-" }}
          </template>
        </el-table-column>
        <el-table-column label="账号状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isuse"
              active-text="正常"
              inactive-text="冻结"
              active-value="1"
              inactive-value="0"
              @change="handleDelete(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="pagination.total"
        @next-click="getData(1)"
        @prev-click="getData(0)"
      >
      </el-pagination>
     
    </el-card>
    <Dialog ref="form" :userdata="userModel" @change="add" />
  </div>
</template>

<script>
import { get, addOrEdit, userDelete } from "@/util/model/user";
import Dialog from "./components/dialog.vue";
import THead from "@/components/Thead.vue";
import http from "../../mixins/http";
import pagination from "@/mixins/pagination";
import thead from "@/mixins/thead";
export default {
  components: {
    Dialog,
    THead,
  },
  data() {
    return {
      userlist: [],
      userModel: {}
    };
  },
  mixins: [http,pagination,thead],
  methods: {
    open() {
      this.userModel = {};
      this.$refs.form.open();
    },
    handleEdit(index, row) {
      this.userModel = {};
      Object.assign(this.userModel,row)
      // this.userModel = row;
      
      this.$refs.form.open(row);
    },
    /**
     * 冻结/解冻账号
     */
    async handleDelete(row) {
      let res = {};
      res = await userDelete(row.id);
      this.$message({
        message: res.msg,
        type: res.code == 200 ? "success" : "error",
      });
      // if (res.code == 200) this.getData();
    },
    async getData(refersh) {
      if (refersh == 0) this.pagination.page--;
      if (refersh == 1) this.pagination.page++;
      if (!refersh) this.pagination.page = 1;
      const res = await get({
        ...this.getSearch(),
        ...this.getPagination()
      });
      this.checkCode(res);
      this.userlist = res.data;
      this.setTotal(res.total)
    },
    async add(e) {
      this.userModel = {
        account_type: 0,
      };
      const res = await addOrEdit(e);
      this.checkCode(res).success(this.getData())
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.headicon {
  width: 40px;
  height: 40px;
}
.el-pagination {
  margin-top: 10px;
}
</style>